<script>
export default {
    data() {
        return {
            keepAliveInclude: []
        }
    },
    onLaunch: function() {
        console.log('App Launch');
    },
    onShow: function() {
        console.log('App Show');
    },
    onHide: function() {
        console.log('App Hide');
    }
};
</script>

<style lang="scss">
/* 全局样式 */
page {
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
        Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
        sans-serif;
}

/* 顶部标题栏样式 */
.uni-page-head {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    
    .uni-page-head__title {
        color: transparent;
        background: linear-gradient(135deg, #FF6B6B, #FFE66D);
        -webkit-background-clip: text;
        font-weight: 600;
        letter-spacing: 1px;
    }
    
    &::after {
        display: none;
    }
}

/* 底部导航栏样式 */
.uni-tabbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 -4rpx 16rpx rgba(31, 38, 135, 0.1);
    
    &::before {
        display: none;
    }
    
    .uni-tabbar__item {
        padding: 12rpx 0;
        
        .uni-tabbar__icon {
            width: 56rpx;
            height: 56rpx;
            filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
        }
        
        .uni-tabbar__label {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 8rpx;
            font-weight: 500;
        }
        
        &.uni-tabbar__item--selected {
            .uni-tabbar__icon {
                transform: scale(1.1);
                transition: transform 0.3s ease;
            }
            
            .uni-tabbar__label {
                color: #3cc51f;
                background: linear-gradient(135deg, #3cc51f, #42d392);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}

.container {
    padding: 20rpx;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}
</style>
